<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="content">
          <div class="mainCont">
            <div class="mainTop">
              <div class="mainTitle">订单详情</div>
              <btn value="返回列表" @click="backfn"></btn>
            </div>
            <div class="userInfo">
              <div class="userLeft">
                <div class="goodsCont">
                  <div class="goodsImg">
                    <img :src="detailInfo.course_cover+ossSrc" />
                  </div>
                  <div class="goodsName">{{ detailInfo.course_name }}</div>
                  <div class="goodsPrice">
                    <div class="priceText">¥{{ detailInfo.course_price }}元/{{ getUnit() }}</div>
                  </div>
                </div>
              </div>
              <div class="userRight">
                <div class="userRightHead">订单信息</div>
                <div class="userRightInfo">
                  <div class="infoItem">
                    <div class="infoName">订单编号:</div>
                    <div class="infoVal">{{ detailInfo.order_number }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">订单状态:</div>
                    <div class="infoVal">
                        <div class="blueBtn" v-if="detailInfo.order_status==1">待付款</div>
                        <div class="blueBtn" v-if="detailInfo.order_status==2">待接单</div>
                        <div class="blueBtn" v-if="detailInfo.order_status==3">待服务</div>
                        <div class="greenBtn" v-if="detailInfo.order_status==5">已完成</div>
                        <div class="blackBtn" v-if="detailInfo.order_status==6">已关闭</div>
                        <div class="blackBtn" v-if="detailInfo.order_status==7">已退款</div>
                    </div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">订单金额:</div>
                    <div class="infoVal">{{ detailInfo.order_total_price }}(元)</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">服务规格:</div>
                    <div class="infoVal">
                        <div class="">{{ detailInfo.num+getUnit() }}</div>
                    </div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">课程级别:</div>
                    <div class="infoVal">
                        <div class="">{{ detailInfo.course_rule_name }}</div>
                    </div>
                  </div>
                  
                  <div class="infoItem" v-if="detailInfo.teacher&&detailInfo.order_status>2">
                    <div class="infoName">教师姓名:</div>
                    <div class="infoVal">
                        <div class="blackBtn underText" @click="toTech">{{ detailInfo.teacher.teacher_name }} -({{ detailInfo.teacher.teacher_sex==1?'男':'女' }})</div>
                    </div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">授课时间:</div>
                    <div class="infoVal">{{ detailInfo.sk_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">授课日期:</div>
                    <div class="infoVal">{{ detailInfo.sk_date }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">创建时间:</div>
                    <div class="infoVal">{{ detailInfo.create_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">支付时间:</div>
                    <div class="infoVal">{{ detailInfo.order_pay_time }}</div>
                  </div>                  
                  <div class="infoItem">
                    <div class="infoName">接单时间:</div>
                    <div class="infoVal">{{ detailInfo.receiving_order_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">完成时间:</div>
                    <div class="infoVal">{{ detailInfo.check_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">退款时间:</div>
                    <div class="infoVal">{{ detailInfo.refund_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">退款金额:</div>
                    <div class="infoVal">{{ detailInfo.refund_money }}</div>
                  </div>
                  <div class="infoItem" v-if="detailInfo.close_reason">
                    <div class="infoName">退款原因:</div>
                    <div class="infoVal">{{ detailInfo.close_reason }}</div>
                  </div>
                  <div class="infoItem" v-if="detailInfo.service_remark">
                    <div class="infoName">订单备注:</div>
                    <div class="infoVal">{{ detailInfo.service_remark }}</div>
                  </div>
                </div>
                <div class="userRightHead hasMargin">客户信息</div>
                <div class="userRightInfo">
                  <div class="infoItem">
                    <div class="infoName">客户姓名:</div>
                    <div class="infoVal">{{ detailInfo.user_name }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">客户电话:</div>
                    <div class="infoVal">{{ detailInfo.user_phone }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">服务地址:</div>
                    <div class="infoVal">{{ detailInfo.service_address }}{{ detailInfo.house_number }}</div>
                  </div>
                </div>
                <div class="userRightHead hasMargin">打卡记录({{ detailInfo.check_records.length }} /{{ detailInfo.num }})</div>
                <div class="userRightInfo">
                  <div class="carIitem" :key="index" v-for="(item,index) in detailInfo.check_records">
                    <div class="carImg">
                      <bigImg height="60px" :src="item.voucher"></bigImg>
                    </div>
                    <div class="carValItem">
                      <div class="carName">打卡时间：</div>
                      <div class="carVal">{{ item.create_time }}</div>
                    </div>
                    <div class="carValItem">
                      <div class="carName">打卡数量：</div>
                      <div class="carVal">{{ parseInt(item.clock_num)+getUnit() }}({{ item.teacher_name }})</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    import bigImg from '@/components/public/bigImg.vue'
    import {orderDetails} from "@/http/api";
  
    export default {
      components: {leftcont,topcont,btn,bigImg},
      data() {
        return {
          input:'',
          value:'',
          status:[],
          detailInfo:{},
        }
      },
      props: {},
      methods:{
        toTech(){
          this.$router.push({path:'/techDetail',query:{id:this.detailInfo.technician_id}})
        },
        getUnit(){
            if(this.detailInfo.course_unit==1){
                return '小时'
            }else if(this.detailInfo.course_unit==2){
                return '课时'
            }
        },
        backfn(){
          this.$router.back()
        },
        getdata(){
          var data = {
            order_id:this.$route.query.id
          }
          orderDetails(data).then((res)=>{
            if(res.data.code==1){
              this.detailInfo = res.data.data
            }else{
              this.$message(res.data.code)
            }
          }).catch((err)=>{
          this.$message('服务器请求超时');
        })
        },
      },
      mounted(){
      },
      created() {
        this.getdata()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .content{
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .mainCont{
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            background-color: #fff;
            .blueBtn{
              color: #96A1FE;
            }
            .redBtn{
              color: #F56C6C;
            }
            .greenBtn{
              color: #85CE61;
            }
            .blackBtn{
              color: #666;
            }
            .underText{
              cursor: pointer;
              text-decoration: underline;
            }
            .mainTop{
              display: flex;
              margin-bottom: 25px;
              align-items: center;
              justify-content: space-between;
              .mainTitle{
                font-size: 14px;
                font-weight: bold;
              }
            }
            .userInfo{
              width: 100%;
              padding: 30px;
              margin-bottom: 30px;
              display: flex;
              background-color: #eff2fe;
              box-sizing: border-box;
              .userLeft{
                .goodsCont{
                  background-color: #fff;
                  padding: 10px;
                  box-sizing: border-box;
                  .goodsImg{
                    width: 200px;
                    height: 200px;
                    img{
                      width: 100%;
                    }
                  }
                  .goodsName{
                    width: 200px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 14px;
                    padding: 5px 0 5px;
                    font-weight: bold;
                  }
                  .goodsTag{
                    font-size: 12px;
                    color: #666;
                  }
                  .goodsPrice{
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    color: #666;
                    margin-top: 10px;
                    align-items: center;
                    .priceText{
                      color: #916ce0;
                      font-size: 20px;
                    }
                  }
                }
                .shopStatus{
                  text-align: center;
                }
              }
              .userRight{
                width: 200px;
                flex: 1;
                margin-left: 15px;
                box-sizing: border-box;
                padding:0 15px;
                .userRightHead{
                  font-size: 15px;
                  font-weight: bold;
                }
                .hasMargin{
                  margin-top: 20px;
                }
                .userRightInfo{
                  width: 100%;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: space-between;
                  .carIitem{
                    width: 48%;
                    background-color: #fff;
                    border-radius: 0.25rem;
                    padding:15px 15px;
                    box-sizing: border-box;
                    margin-top: 15px;
                    display: flex;
                    justify-content: space-between;
                    .carValItem{
                      color: #666;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-around;
                    }
                    .carImg{
                      height: 60px;
                      img{
                        height: 100%;
                      }
                    }
                  }
                  .infoItem{
                    width: 48%;
                    margin:10px 0px;
                    display: flex;
                    line-height: 20px;
                    font-size: 14px;
                    .infoName{
                      width: 60px;
                      text-align: left;
                      margin-right: 15px;
                      color: #999;
                    }
                  }
                }
              }
          }
          }
        }
      }
    }
  </style>
  